<template>
    <suspense>
        <div class="common-layout">
            <header style="background-color: #2662EF; height: 5vh; line-height: 5vh; padding-left: 50px; color: #fff;">
                <span>{{ username}}</span>
                <span @click="() => router.push({path: '/btyindex'})" style="cursor: pointer; margin-left: 20px;">返回主页</span>
            </header>
            <div style="display: flex;">
                <div style="flex: 2;">
                    <div class="admin-wrapper">
                        <span @click="() => router.push({ path: '/admin/order' })" >用户订单</span>
                        <span @click="() => router.push({ path: '/admin/company' })" >公司信息</span>
                        <span @click="() => router.push({ path: '/admin/lunbo' })" >横向轮播</span>
                        <span @click="() => router.push({ path: '/admin/sulunbo' })" >竖向轮播</span>
                        <span @click="() => router.push({ path: '/admin/category_first' })" >产品一级</span>
                        <span @click="() => router.push({ path: '/admin/category_second' })">产品二级</span>
                        <span @click="() => router.push({ path: '/admin/product' })">产品详细</span>
                        <span @click="() => router.push({ path: '/admin/promotional' })">促销活动</span>
                        <span @click="() => router.push({ path: '/admin/technology' })">技术咨询</span>
                        <span @click="() => router.push({ path: '/admin/orderCenter' })">订购中心</span>
                        <span @click="() => router.push({ path: '/admin/news' })">公司新闻</span>
                    </div>
                </div>
                <div style="flex: 14;">
                    <div class="admin-main-inner">
                        <el-main class="main" style="padding: 0;">
                            <section>
                                <router-view v-slot="{ Component }">
                                    <transition name="slide-fade" mode="out-in">
                                        <div :key="route.path">
                                            <component :is="Component"></component>
                                        </div>
                                    </transition>
                                </router-view>
                            </section>
                        </el-main>
                    </div>
                </div>
            </div>
        </div>
    </suspense>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';

const username = window.localStorage.getItem("username");

const route = useRoute();
const router = useRouter();
</script>

<style scoped>
.common-layout {
    height: 100vh;
    background-color: #F2F3F5;
}

.admin-wrapper>span {
    display: block;
    padding: 20px;
    cursor: pointer;
}

.admin-wrapper {
    background-color: #ffffff;
    border-right: 1px solid #efe1e1;
    height: 95vh;
    
}
.admin-wrapper > span{
    padding-left: 50px;
}
.admin-wrapper>span:hover {
    background-color: #F2F3F5;
}

.admin-main-inner {
    margin: 20px;

    background-color: #ffffff;
}
</style>